<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jkui Docs Home</title>
<link type="text/css" rel="stylesheet" href="../css/layout.css" />
<link type="text/css" rel="stylesheet" href="../css/theme.css" />
</head>

<body>
	<div>
    	<div class="header">
        	<h1><a href="index.html">Project jkui Documentation</a></h1>
        </div>
        <div class="columns">
        	<div class="left navigation">
				<h2>Navigation</h2>
            	<ul class="menu">
					<li><a href="../index.html">jkui Home</a></li>
                	<li><a href="core.html">Core</a>
						<ul>
							<li><a href="#oo">OO interface</a></li>
							<li><a href="#event">Event model</a></li>
							<li><a href="#accessors">Accessors</a></li>
							<li><a href="#utilities">Utilities</a></li>
						</ul>
					</li>
                    <li>Widgets (N/A)</li>
                </ul>
            </div>
            <div class="middle">
				<h2 class="content-title">Core documentation</h2>
				<ul class="docs">
					<li id="oo" class="item">
						<h3>Object Oriented Interface</h3>
						Class: <strong>jkui</strong>
						<p>Base class that provids the event model, can be instantiated.</p>
						Function: <strong>jkui.extend (parent Class, constructor, [injection1, [injection2...]])</strong>
						<p>Creates an extended class from the base class.</p>
						<h5>Example</h5>
							<pre>
var myClass = jkui.extend (jkui, function() {
	//constructor
	this.Super();	//compulsary call to super class
	this.data = 'my data';
});

//define a class method
myClass.prototype.method = function () { alert (this.data); }

//define the destructor
myClass.prototype.destroy = function () {
	delete this.data;	//release the data member
}

//an extended class from the class we just created
var myExtendedClass = jkui.extend (myClass, function(){
	this.Super();
	this.data = 'test;	//overwrites the data from parent
	this.data2 = 123;
});

myExtendedClass.prototype.destroy = function(){
	delete this.data2;	//only need to release the data member new to the parent class
}

var obj = new myExtendedClass();	//instantiate myExtendedClass
var obj2 = myExtendedClass();	//instantiate can also be done without "new" operator

obj = obj.destroy();	//obj.data and obj.data2 will be deleted, and "obj" will be set to "null"</pre>
						
						Function: <strong>jkui.abstractExtend (parentClass, constructor)</strong>
						<p>Similar to jkui.extend, the extended class rejects instantiation, like what we had in Java for an AbstractClass. This feature is being enhanced to enforce the implementation to follow the definition.</p>
						
							<h5>Example</h5>
							<pre>
//create an abstract class
var myAbstractClass = jkui.abstractExtend(jkui, function(){
	this.data = 'data';
});

var fail = new myAbstractClass();	//this will be throwing "AbstractClassInstatiationException"</pre>
						
						Function: <strong>jkui.inject (object/constructor)</strong>
						<p>It's like an "implemented interface" in Java, where interface in Java is just a group of function prototypes. This function can inject the method of one object to another. If the injecter (the party to inject) is a constructor, it will first apply the constructor, then create an instance of it, then inject the instance to injectee.</p>
						<h5>Example</h5>
<pre>
var injectee = {data: 1};
var injector = {data2: 2};
jkui.inject (injectee, injector);	//now injectee has a reference to data2</pre>
						
					</li>
					<li id="events" class="item">
						<h3>Event model</h3>
						Method come with <strong>Class jkui</strong>: <strong>bind</strong>, <strong>unbind</strong>, <strong>trigger</strong>
						<p> It is very similar to the usage of jQuery's event model </p>
							<h5>Example: bind events to an object:</h5>
							<pre>
var obj = jkui();
obj.bind('myEvent', function() {alert (1);}
obj.bind('myEvent', function() {alert (2);}</pre>
							<h5>Example: unbind an event:</h5>
							<pre>
var obj = jkui();
var eventHandler = funtion(){alert (1);}
var eventHandler2 = funtion(){alert (2);}
obj.bind('myEvent', eventHandler);	//bind the eventHandler to event "myEvent"
obj.bind('myEvent', eventHandler2);
obj.unbind('myEvent', eventHandler2);	//unbind eventHandler2
obj.unbind('myEvent');	//unbind all event handlers associated with "myEvent"
obj.unbind();	//unbind all event handlers of "obj" *USE WITH CAUTION!*</pre>
							<h5>Example: trigger an event:</h5>
							<pre>
var obj = jkui();
obj.bind('myEvent', function(){alert(1);});
obj.trigger('myEvent');	//alert 1</pre>
							<h5>Example: mixed the 3 utilities with more options</h5>
							<pre>
var obj = jkui();
function eventHandler () {alert(1);}
function eventHandler2 () {alert(2); return false;}

obj.bind('myEvent', eventHandler);	//bind eventHandler
obj.bind('myEvent', eventHandler, false);	//bind event without checking duplication handlers
obj.trigger('myEvent');	//alert 1 twice
obj.bind('myEvent', eventHandler);	//bind event after checking duplication handlers
obj.trigger('myEvent');	//still alert 1 twice

if (obj.trigger('myEvent')) {	//return true because event handlers binded to "myEvent" don't "return false"
	obj.bind('myEvent', eventHandler2);
	obj.bind('myEvent', eventHandler);
	if (obj.trigger('myEvent'))	//returns false because eventHanlder2 returns false
		obj.unbind('myEvent', eventHandler);	//skipped
	obj.unbind('myEvent', eventHandler, false);	//unbind eventHandler without checking duplication
	obj.trigger('myEvent');	//alert 1 2 1, the previous line removed the oldest event handler binded
	obj.unbind('myEvent', eventHandler);	//unbind with checking of duplication
	obj.trigger('myEvent');	//alert 2
	obj.unbind('myEvent');
	obj.trigger('myEvent');	//no alerts
}</pre>
					</li>
					<li id="accessors" class="item">
						<h3>Accessors</h3>
						Function: <strong>jkui.each (object to be iteratored, processor, [ex-par1, [ex-par2...]])</strong>
						<p>Iterates an object's members as if it's an Array (has "length" property"), or as an object otherwise</p>
						
						<h5>Example:</h5>
						<pre>
var obj = {a: 1, b: 4};
jkui.each(obj, function(i, str, attr) {	//first parameter of this anonymous function is the key (either
					//number or attribute name), the following are mapped from the 
					//parameters after this function in jkui.each, and the last parameter is the value
	alert (str + i + ' - ' + attr);	//will alert "current: a - 1" and "current: b - 4"
}, 'current: ');</pre>
						
						Function: <strong>jkui.all (object to be iterated, processor, [isTrue function of type function(x){return true/false;}])</strong>
						<p>Test if all elements in an array results in a "true" value after applying to a function. "isTrue" function takes the result of the processor, and testify the truth value. By default, isTrue = function(x) {return x || x === 0;}; </p>
						
						<h5>Example:</h5>
						<pre>
var obj = {a: 1, b: 4};
jkui.all(obj, function() {	//we don't have the freedom of passing in extra parameters as we did in jkui.each
	return this == 1;	//"this" points to the value in each iteration
});</pre>
						
						Function: <strong>jkui.any (object to be iterated, processor, [isTrue function])</strong>
						<p>Similar to "jkui.all", it returns true if any of the evaluations returns true.</p>
						Function: <strong>jkui.trim (object, isTrue function)</strong>
						<p>Remove any false values at the end of an array</p>
					</li>
					<li id="utilities" class="item">
						<h3>Utilities</h3>
						Function: <strong>jkui.bind (function, object)</strong>
						<p>Change the "this" pointer inside a function permanently</p>
						<h5>Example:</h5>
						<pre>
function test(){alert this.a;}
var obj = {a: 1};
$$.bind(test, obj)();	//will alert 1</pre>
						
					</li>
				</ul>
            </div>
        </div>
		<div class="footer">
			<div class="links">
				<a href="../index.html">jkui Home</a> - <a href="http://jquery.com">jQuery.com</a>
			</div>
			<p>(c) 2009-2010 - The jkui Group</p>
		</div>
    </div>
</body>
</html>
